<!-- 我的投稿 && 我的作品-->
<template>
	<div :class="'contribute-list-panel'+type">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
			<van-list v-if="contributeList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了"
				@load="onLoad">
				<div v-for="(item, index) in contributeList" :key="index" class="contribute-item" @click="viewfile(item.Id)">
					<div class="contribute-top">
						<div :class="'contribute-status contribute-status' + item.AuditStatus">
							{{
								item.AuditStatus == 0
									? '待审核'
									: item.AuditStatus == 1
									? '已通过'
									: item.AuditStatus == 2
									? '未通过'
									: item.AuditStatus == 3
									? '已录用'
									: ''
							}}
						</div>
						<div class="contribute-title limit-one-line">
							{{item.Title}}
						</div>
					</div>
					<div class="contribute-content limit-one-line">
						{{item.Remark}}
					</div>
					<div v-if="item.AttaList.length > 0" >
						<div v-for="(jtem, index) in item.AttaList" :key="index" class="contribute-accessory">
							<div class="accessory-iocn">
								<van-image width="100%" height="100%" :src="accessoryImgs[jtem.AttaType]"></van-image>
							</div>
							<div class="accessory-info">
								<div class="accessory-name limit-one-line">
									{{jtem.AttaName}}
								</div>
								<div class="accessory-type limit-one-line">
									格式：{{jtem.AttaName.split('.')[1]}} &nbsp; 上传时间：{{item.AddTime.substr(0,10)}}
								</div>
							</div>
							<div class="look-accessory">查看详情</div>
						</div>
					</div>
					<div class="contribute-operation">
						<div class="contribute-time">发布时间：{{item.AddTime}}</div>
						<div class="contribute-operation-btn">
							<button class="delete-btn" v-if="item.AuditStatus == 0 || item.AuditStatus == 2" @click="goDelete(item.Id)">删除</button>
							<button class="redact-btn" v-if="item.AuditStatus == 0 || item.AuditStatus == 2" @click="$router.push('/submit-contribute?id='+item.Id)">编辑</button>
						</div>
					</div>
				</div>
			</van-list>
			<div v-else class="default-page">
				<default-page :hint="hint"></default-page>
			</div>
		</van-pull-refresh>
		<div v-if="type == 0" class="goContribute">
			<button class="btn main-btn goContribute-btn" @click="goContribute">
				我要投稿
			</button>
		</div>
	</div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'
	import DefaultPage from '../../components/DefaultPage.vue'

	import {
		learn_api
	} from '../../api/index.js'

	export default {
		name: 'contribute-list',
		components: {
			NavBar,
			DefaultPage,
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,

				contributeList: [1, 2, 3, 4, 5],
				pageIndex: 1,

				accessoryImgs: [
					require('../../assets/imgs/accessory-file.png'),
					require('../../assets/imgs/accessory-video.png'),
					require('../../assets/imgs/accessory-audio.png'),
					require('../../assets/imgs/accessory-link.png'),
				],
			}
		},
		activated() {
			this.getContributeList(false)
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.pageIndex = 1
						// this.addressList = [];
						Toast('刷新成功')
					} else {
						this.pageIndex++
					}

					this.getContributeList()

					this.loading = false
				}, 1000)
			},
			onRefresh() {
				this.loading = true
				this.onLoad()
			},
			getContributeList(is_push = true) {
				this.refreshing = false
				let data = {
					PageIndex: this.pageIndex,
					IsShowAll: 0,
				}
				learn_api.getstudyworkslist(data, (res) => {
					console.log('getstudyworkslist', res)
					if (this.refreshing || !is_push) {
						this.contributeList = res
					} else {
						this.contributeList.push(...res)
					}
					this.refreshing = false
					if (res.length < 20) {
						this.finished = true //已全部加载
					}
				})
			},
			goContribute() {
				this.$router.push('/submit-contribute')
			},
			goDelete(id) {
				Dialog.confirm({
					width: '5.4rem',
					title: '确认删除',
					message: '你确定删除该投稿吗',
					className: '.dialog-box',
					confirmButtonText: '确定',
					confirmButtonColor: '#F7383C',
					cancelButtonText: '我再想想',
					cancelButtonColor: '#666666',
				})
				.then(() => {
					let data = {
						Id: id,
					}
					learn_api.delStudyworksInfo(data, (res) => {
						console.log(res)
						Toast('删除成功')
						setTimeout(() => {
							this.getContributeList(false)
						}, 1000)
					})
				})
				.catch(() => {
					// on cancel
				})
			},
			viewfile(id) {
				this.$router.push({path:'/works',query:{id:id}});
			}
		},
		computed: {
			title() {
				return this.type == 0 ? '我的投稿' : '我的作品'
			},
			hint() {
				return this.type == 0 ? '暂无投稿' : '暂无作品'
			},
			type() {
				if (this.$route.params.type) {
					return this.$route.params.type
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).type
				} else {
					return 0 //0-投稿， 1-作品
				}
			}
		}
	}
</script>

<style scoped>
	.contribute-list-panel0 {
		width: 100%;
		height: 100%;
		padding: 0.88rem 0 1.4rem;
		background-color: #f6f5fb;
	}

	.contribute-list-panel1 {
		padding: 0.88rem 0 0.4rem;
	}

	.default-page {
		width: 100%;
		min-height: calc(100vh - 0.88rem);
		background: #ffffff;
	}

	.contribute-list {
		min-height: calc(100vh - 0.88rem);
	}

	.contribute-item {
		background: #ffffff;
		padding: 0 0.28rem;
		margin: 0.03rem 0;
		min-height: 2.5rem;
	}

	.contribute-top {
		display: flex;
		height: 0.74rem;
		padding-top: 0.3rem;
		align-items: center;
	}

	.contribute-status {
		width: 0.9rem;
		min-width: 0.9rem;
		height: 0.32rem;
		text-align: center;
		border-radius: 0.08rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 0.32rem;
	}

	.contribute-status2 {
		background: #ffdddd;
		color: #fe4b4b;
	}

	.contribute-status0 {
		background: #fff8dd;
		color: #f19f28;
	}

	.contribute-status3 {
		background: #dbf1f9;
		color: #1d5ca4;
	}

	.contribute-status1 {
		background: #d6f4d2;
		color: #47a41d;
	}

	.contribute-title {
		height: 0.44rem;
		font-size: 0.3rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.44rem;
		padding-left: 0.1rem;
	}

	.contribute-content {
		height: 0.34rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
		margin: 0.12rem 0 0.2rem;
	}

	.contribute-accessory {
		height: 1.12rem;
		background: #f8f8f8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		padding: 0.18rem 0.24rem;
	}

	.accessory-iocn {
		width: 0.6rem;
		min-width: 0.6rem;
		height: 0.6rem;
		margin: 0 0.2rem 0 0;
	}

	.accessory-info {
		width: calc(100% - 2.2rem);
	}

	.accessory-name {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
		margin-bottom: 0.08rem;
	}

	.accessory-type {
		height: 0.28rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a3a3a3;
		line-height: 0.28rem;
	}

	.look-accessory {
		width: 1.6rem;
		text-align: right;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #fe4b4b;
		line-height: 0.4rem;
	}

	.contribute-operation {
		padding: 0.2rem 0;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.contribute-time {
		height: 0.34rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
	}

	.contribute-operation-btn {
		display: flex;
	}

	.delete-btn,
	.redact-btn {
		width: 1.4rem;
		height: 0.6rem;
		border-radius: 0.1rem;
	}

	.delete-btn {
		color: #666666;
		border: 0.02rem solid #666666;
		margin-right: 0.16rem;
	}

	.redact-btn {
		color: #fe4b4b;
		border: 0.02rem solid #fe4b4b;
	}

	.goContribute {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.goContribute-btn {
		margin-bottom: 0.4rem;
	}
</style>
